<template>
  <!-- 编辑的弹出框 -->
  <el-dialog
    :title="`${showText}班级`"
    :visible.sync="showDialogEdit"
    @close="btnCancel"
  >
    <el-form
      :model="formData"
      :rules="rules"
      ref="editForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-col :span="12">
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            v-model="formData.subject_id"
            placeholder="请选择"
            clearable
            @focus="subjectClass"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="班级名称" prop="class_name">
          <el-input
            v-model="formData.class_name"
            clearable
            placeholder="请输入班级名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="授课老师">
          <el-select
            v-model="teachers"
            multiple
            placeholder="请选择"
            clearable
            @focus="teacherShow"
          >
            <el-option
              v-for="item in teacher"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="助教老师">
          <el-select
            v-model="zhujiaos"
            multiple
            placeholder="请选择"
            clearable
            @focus="zhujiaoShow"
          >
            <el-option
              v-for="item in zhujiao"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="班主任老师">
          <el-select
            v-model="managers"
            multiple
            placeholder="请选择"
            clearable
            @focus="managerShow"
          >
            <el-option
              v-for="item in manager"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="开课结束日期">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker> </el-form-item
      ></el-col>

      <el-col :span="12">
        <el-form-item label="排序">
          <el-input-number
            v-model="formData.sort"
            @change="handleChange"
            :min="1"
            :max="100"
          ></el-input-number
        ></el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="班级状态"
          ><el-switch
            v-model="formData.state"
            active-text="正常"
            inactive-text="关闭"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-col>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="showDialogEdit = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  EditShowClass,
  subjectClass,
  teacherClass,
  editClass,
  addClass,
} from "@/api/class";
export default {
  name: "EditClass",
  components: {},
  props: {},
  data() {
    return {
      showDialogEdit: false, // 控制编辑的弹出框
      teachers: [],
      zhujiaos: [],
      managers: [],
      time: [],
      // 下拉菜单
      teacher: [],
      zhujiao: [],
      manager: [],
      // 校验
      rules: {
        subject_id: [
          { required: true, message: "请选择学科分类", trigger: "blur" },
        ],
        class_name: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
      },
      formData: {},
      subject: [], // 学科
    };
  },
  computed: {
    showText() {
      return this.formData.id ? "修改" : "添加";
    },
  },
  watch: {},
  created() {
    this.subjectClass();
  },

  mounted() {},
  methods: {
    // 排序
    handleChange(value) {
      // console.log(value);
      this.formData.sort = value;
    },
    // 编辑回显数据
    async EditShowClass(id) {
      if (id) {
        const formData = await EditShowClass(id);
        formData.teacher_info = JSON.parse(formData.teacher_info);
        formData.manager_info = JSON.parse(formData.manager_info);
        formData.zhujiao_info = JSON.parse(formData.zhujiao_info);
        this.formData = formData;
        console.log("数据回显", this.formData);
        this.formData.teacher_info.forEach((item) => {
          this.teachers.push(item.username);
        });
        this.formData.zhujiao_info.forEach((item) => {
          this.zhujiaos.push(item.username);
        });
        this.formData.manager_info.forEach((item) => {
          this.managers.push(item.username);
        });
        this.time = [this.formData.start_time, this.formData.end_time];
        //   console.log("时间", this.time);
      } else {
        this.time = [];
        this.formData.sort = 10;
      }
    },
    // 学科下拉菜单回显
    async subjectClass() {
      this.subject = await subjectClass();
      console.log("学科回显", this.subject);
    },
    // 授课老师下拉菜单
    async teacherShow() {
      this.teacher = await teacherClass("讲师");
      console.log("授课老师下拉菜单", this.teacher);
    },
    // 助教老师下拉菜单
    async zhujiaoShow() {
      this.zhujiao = await teacherClass("助教");
    },
    // 班主任老师下拉菜单
    async managerShow() {
      this.manager = await teacherClass("班主任");
    },
    // 确定编辑
    async onSubmit() {
      // 表单校验
      await this.$refs.editForm.validate();
      // 处理时间数据
      this.formData.start_time = this.time[0];
      this.formData.end_time = this.time[1];
      // console.log(this.time);
      // 处理老师数据
      this.formData.teacher_info = [];
      this.teachers.forEach((item) => {
        this.teacher.forEach((arr) => {
          if (arr.username === item) {
            return this.formData.teacher_info.push(arr);
          }
        });
      });
      this.formData.manager_info = [];
      this.managers.forEach((item) => {
        this.manager.forEach((arr) => {
          if (arr.username === item) {
            return this.formData.manager_info.push(arr);
          }
        });
      });
      this.formData.zhujiao_info = [];
      this.zhujiaos.forEach((item) => {
        this.zhujiao.forEach((arr) => {
          if (arr.username === item) {
            return this.formData.zhujiao_info.push(arr);
          }
        });
      });
      // 提交数据
      // 判断是修改还是添加
      if (this.formData.id) {
        // 修改

        // console.log("得到的", this.formData.teacher_info);

        console.log(this.formData);

        await editClass(this.formData);
      } else {
        // 添加
        console.log("添加", this.formData);

        await addClass(this.formData);
      }

      // 提示
      this.$message.success(this.formData.id ? "修改成功!" : "添加成功!");
      // 关闭
      this.showDialogEdit = false;
      // 列表更新
      this.$emit("update");
    },
    // 取消
    btnCancel() {
      this.formData = {};
      this.teachers = [];
      this.zhujiaos = [];
      this.managers = [];
      this.$refs.editForm.resetFields();
    },
  },
};
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9ecef;
}
.el-date-editor--daterange.el-input__inner {
  width: auto;
}
</style>